<template>
  <dl class="sim" v-if="type === 'sim'">
    <dd>
      <h3>{{ title }}</h3>
      <p>{{ comm }}评论/{{ city }}</p>
    </dd>
    <dt>
      <img :src="urls[0]" alt="" />
    </dt>
  </dl>
  <dl class="mul" v-else>
    <dd>
      <h3>{{ title }}</h3>
    </dd>
    <dt>
      <img v-for="(item, index) in urls" :key="index" :src="item" alt="" />
    </dt>
    <dd>
      <p>{{ comm }}评论/{{ city }}</p>
    </dd>
  </dl>
</template>

<script>
export default {
  name: "listItem",
  props: {
    type: String,
    id: String,
    title: String,
    urls: Array,
    city: String,
    comm: Number,
  },
};
</script>


<style scoped lang='scss'>
.sim {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  dd {
    flex: 1;
  }
}

.mul {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  dt {
    display: flex;
    margin: 10px 0;
    img {
      width: 33%;
    }
  }
}

img {
	height: 80px;
}
</style>